从前面的讨论可以了解到，内边距、外边距和边框都可以应用于网页设计行内非替换元素。行内元素的这些方面根本不会影响行框的高度。如果对一个无内外边距的span元素应用某个边框，可能得到如图7-40所示的结果。

网站建设行内元素的边框边界由font-size而不是line-height控制。换句话说，如果一个span元素的font-size为12px, line-height为36px，其内容区就是12px高，边框将包围该内容区。

或者，可以为行内元素指定内边距，这会把边框从文本本身拉开：

span {border: 1px solid black; padding: 4px;}

注意，这个内边距并没有改变内容区的具体形状，不过它会影响这个元素行内框的高度。类似地，网页设计中向一个行内元素增加边框也不会影响行框的生成和布局。

至于外边距，实际上，外边距不会应用到行内非替换元素的顶端和底端，它们不影响行框的高度。不过，行内元素的两端则是另一回事。

注意：CSS2.1中明确指定了外边距的放置，它定义了margin-top和margin-bottom （可以应用到不是行内非替换元素的所有其他元素），而不是简单地说用户代理应当忽略上、下外边距。

应当还记得，行内元素基本上会作为一行放置，然后分成多个部分，所以，如果向一个行内元素应用外边距，这些外边距将出现在其开始和末尾，分别为左、右外边距。内边距也出现在边界上。因此，网页设计尽管内边距和外边距（以及边框）不影响行高，但是它们确实能影响一个元素内容的布局，可能将文本推离其左右两端。实际上，如果左、右外边距为负，可能会把文本拉近行内元素，甚至导致重叠。

可以把行内元素想成是一个纸片，外围有一些塑料边。在多行上显示行内元素就像是把一个大纸片剪成一些小纸片。不过，每个小纸片上不会增加额外的塑料边。小纸片上的塑料边还是最初那个大纸片上的塑料边，所以看上去只是原来纸片（行内元素）最前和最后两端上出现塑料边。

所以，网站建设如果行内元素有一个背景，而且内边距足够大以至于行背景重叠，此时会发生什么情况呢？看下面的例子：

p {font-size: 15px; line-height: 1em;}

p span {background:#999; padding-top: 10px; padding-bottom: 10px;}

span元素中的所有文本都有15像素高的内容区，而且为各内容区的顶部和底部各增加了10像素的内边距。这些额外的像素不会增加行框的高度，这原本很好，不过这里有背景色。

网站建设CSS 2.1明确指出行框按文档的顺序绘制：“这会导致后续行的边框在前面行的边框和文本上绘制。”这个原则同样适用于背景，如图7-43所示。另一方面，CSS2允许用户代理“‘切掉’边框和内边距区（也就是不显示边框和内边距）”。因此，具体结果可能很大程度上取决于用户代理遵循哪一个规范。